<template>
  <van-pull-refresh v-model="loading1" @refresh="onRefresh">
    <van-list
      v-if="useList"
      v-model:loading="loading1"
      :finished="finished"
      :finished-text="endText"
      @load="onLoad"
    >
      <slot />
      <div class="no-data" v-if="!loading && data.length == 0">暂无数据</div>
    </van-list>

    <template v-else>1111<slot /></template>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { defineEmits, computed } from 'vue';

const props = defineProps({
  loading: { type: Boolean, default: false },
  finished: { type: Boolean, default: false },
  useList: { type: Boolean, default: true },
  finishedText: { type: String, default: '没有数据了' },
  data: { type: Array, default: () => [] },
});

const emit = defineEmits(['update:loading', 'load', 'refresh']);

const loading1 = computed({
  get: () => props.loading,
  set: (val) => emit('update:loading', val),
});

const endText = computed(() => (props.data.length === 0 ? '' : props.finishedText));

const onLoad = () => emit('load');
const onRefresh = () => emit('refresh');
</script>

<style lang="scss" scoped>
.no-data {
  text-align: center;
  line-height: 100px;
  font-size: 14px;
}
</style>
